/**
 * 直播数据录入弹窗
 */
import { StyleProvider } from "@ant-design/cssinjs"
import { Modal } from "antd"
import React, { useRef, useState } from "react"
import type { DraggableData, DraggableEvent } from "react-draggable"
import Draggable from "react-draggable"

import { usePort } from "@plasmohq/messaging/hook"

import { ThemeProvider } from "~theme"

import DataRecordTools from "./DataRecordModalTools"
import DataRecordTable from "./DataRecordTable"

// 组件参数
export interface DataRecorderModalIndexProps {
  // 注入的shadow dom的id
  HostId: string
  // 网络拦截数据
  hijackData?: any
}

const DataRecorderModalIndex: React.FC<DataRecorderModalIndexProps> = ({
  HostId,
  hijackData
}) => {
  // 显示状态通信port
  const visiblePort = usePort("recordModalVisible")
  // 是否允许拖动
  const [moveDisable, setMoveDisable] = useState(true)
  // 拖动范围
  const [bounds, setBounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 })
  // 拖动元素
  const draggleRef = useRef<HTMLDivElement>(null)
  // 表格数据
  const [tableData, setTableData] = useState([])

  // 处理拖动开始
  const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
    const { clientWidth, clientHeight } = window.document.documentElement
    const targetRect = draggleRef.current?.getBoundingClientRect()
    if (!targetRect) {
      return
    }
    setBounds({
      left: -targetRect.left + uiData.x,
      right: clientWidth - (targetRect.right - uiData.x),
      top: -targetRect.top + uiData.y,
      bottom: clientHeight - (targetRect.bottom - uiData.y)
    })
  }
  // 处理数据记录弹窗关闭
  const handleClose = async () => {
    visiblePort.send({
      visible: false
    })
  }

  return (
    <ThemeProvider>
      <StyleProvider container={document.getElementById(HostId).shadowRoot}>
        <Modal
          width={980}
          title={
            <div
              className={"data-record-modal-title"}
              onMouseOver={() => {
                if (moveDisable) {
                  setMoveDisable(false)
                }
              }}
              onMouseOut={() => {
                setMoveDisable(true)
              }}>
              <span>直播数据提交</span>
            </div>
          }
          className={"data-record-modal"}
          footer={null}
          mask={false}
          keyboard={false}
          maskClosable={false}
          open={visiblePort.data}
          onCancel={handleClose}
          onOk={handleClose}
          getContainer={false}
          modalRender={(modal) => (
            <Draggable
              disabled={moveDisable}
              bounds={bounds}
              onStart={(event, uiData) => onStart(event, uiData)}>
              <div ref={draggleRef}>{modal}</div>
            </Draggable>
          )}>
          <div className={"data-record-modal-content"}>
            <DataRecordTools
              setTableData={(data) => setTableData(data)}
              hijackData={hijackData}
            />
            <DataRecordTable tableData={tableData} />
          </div>
        </Modal>
      </StyleProvider>
    </ThemeProvider>
  )
}

export default DataRecorderModalIndex
